<template>
	<view class="commission-details" :class="themeName">
		<view class="search_outer FlexRow">
			<view class="search_area FlexBetween FlexItem">
				<view class="icon FlexRow" @click="searchRefresh">
					<u-icon name="search" color="#C4C4C4" size="28"></u-icon>
				</view>
				<input type="text"
				 v-model="association_sn" 
				 placeholder="请输入订单编号/用户编号/昵称/手机号">
				
			</view>
			<view class="searchbtn" @click="searchRefresh">
				搜索
			</view>
		</view>
		
		
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption" :down="downOption"
			@down="downCallback">
			<view class="p-20">
				<!-- <view class="bg-white" v-for="(item, index) in lists" :key="index">
					<record-cell :remark="item.type_desc" :date="item.create_time" :money="item.change_amount_desc"
						:type="item.action" />
					
				</view> -->
				
				<view class="yjin_item" 
				@click.stop="toDetail(item)"
				v-for="(item, index) in lists" :key="index">
					<view class="yjin_code FlexAlign">
						来源单号：{{item.association_sn}}
					</view>
					<view class="yjin_head FlexBetween">
						<view class="tit">
							{{item.type_desc}}
						</view>
						<view class="money add">
							{{item.change_amount_desc}}
						</view>
					</view>
					<view class="yjin_content">
						<view class="yjin_txt" v-if="item.nickname">
							用户昵称：
							<text>
								{{item.nickname}}
							</text>
						</view>
						<view class="yjin_txt" v-if="item.change_amount">
							剩余金额：
							<text>
								￥{{item.change_amount}}
							</text>
						</view>
						<view class="yjin_txt" v-if="item.create_time">
							记录时间：
							<text>
								{{item.create_time}}
							</text>
						</view>
					</view>
				</view>
			</view>
			<w-jishuzhichi :class="[{'jishuzhichi-nodata':lists.length == 0}]" />
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import recordCell from '@/bundle/components/record-cell/record-cell.vue'
	import {
		usersBillist,
	} from "@/api/user";
	export default {
		components: {
			recordCell
		},
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				upOption: {
					empty: {
						icon: this.$getImageUri('resource/image/shopapi/uniapp/empty/order.png'),
						tip: this.$zhTran('暂无记录~'), // 提示
					}
				},
				lists: [], // 列表数据--全部
				association_sn: '',
			};
		},

		methods: {
			searchRefresh(){
				let info = {
					num: 1,
					size: 10,
				}
				this.upCallback(info)
			},
			// 详情
			toDetail(item){
				uni.navigateTo({
				  url: `/bundle/pages/commission_details/commdetails?id=${item.id}`  
				});  
			},
			
			// 上拉加载 
			upCallback(page) {
				const pageNum = page.num; // 页码, 默认从1开始
				const pageSize = page.size; // 页长, 默认每页10条
				usersBillist({
					page_size: pageSize,
					page_no: pageNum,
					association_sn: this.association_sn,
				}).then((data) => {
					if (page.num == 1) this.lists = [];
					const curPageData = data.lists;
					const curPageLen = curPageData.length;
					this.lists = this.lists.concat(curPageData);
					this.lists = this.$zhTran(this.lists)
					this.mescroll.endSuccess(curPageLen, data.count);
				}).catch(() => {
					this.mescroll.endErr()
				})

			}
		},
		onLoad() {
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	@import "@/bundle4/css/Flex.scss";
	.search_outer{
		width: 100%;
		height: 104rpx;
		background: #FFFFFF;
		padding: 0 26rpx;
		.search_area {
			
			// width: 584rpx;
			height: 72rpx;
			border-radius: 100rpx;
			background: #F8F8FA;

			.icon{
				width: 70rpx;
				height: 100%;
				i{
					color: #C4C4C4;
					font-size: 26rpx;
				}
			}
			input{
				flex: 1;
				height: 100%;
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(146, 146, 146, 1);

			}
		}
		.searchbtn{
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(72, 72, 72, 1.0);
			text-align: center;
			margin-left: 20rpx;
		}
	}
	
	
	.yjin_item{
		width: 100%;
		background: #fff;
		padding: 30rpx 35rpx;
		border-radius: 14rpx;
		margin-bottom: 20rpx;
		.yjin_code{
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(22, 22, 22, 1);
			border-bottom: solid 1px #F1F1F1;
			padding-bottom: 16rpx;
		}
		.yjin_head{
			width: 100%;
			padding: 30rpx 0; 
			.tit{
				font-size: 32rpx;
				font-weight: 550;
				color: rgba(22, 22, 22, 1);

			}
			.money{
				font-size: 40rpx;
				font-weight: 700;
				text-align: right;
				&.add{
					color: rgba(43, 162, 69, 1);
					
				}
				&.jian{
					
				}
			}
		}
		.yjin_content{
			width: 100%;
			.yjin_txt{
				margin-bottom: 14rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(159, 159, 159, 1);
				text{
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(104, 104, 104, 1);
				}
			}
		}
	}
	
	  
</style>